<template>
  <!-- 客户统计 -->
  <div>
    <el-card>
      <NormalForm :enumOpt="enumOpt" :formList="formList" :operateForm="queryForm" pageTitle="客户统计"
                  @handleQuery="handleQuery" @handleReset="handleReset" @selectDateType="selectDateType"
      ></NormalForm>
    </el-card>
    <el-card style="margin-top: 20px;">
      <div class="icon-card">
        <div class="icon-box">
          <div>
            <img alt="" src="@/assets/image/kehu.png">
          </div>
          <div class="text-box">
            <span class="num-span">{{ numObj.customerTotal || 0 }}</span>
            <span>总客户数量</span>
          </div>
        </div>
        <div class="line-v"></div>
        <div class="icon-box">
          <div>
            <img alt="" src="@/assets/image/kehuliushi.png">
          </div>
          <div class="text-box">
            <span class="num-span">{{ numObj.lostTotal || 0 }}</span>
            <span>总流失数</span>
          </div>
        </div>
        <div class="line-v"></div>
        <div class="icon-box">
          <div>
            <img alt="" src="@/assets/image/zongjingzhi.png">
          </div>
          <div class="text-box">
            <span class="num-span">{{ numObj.netIncreaseTotal || 0 }}</span>
            <span>总净增</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px;">
      <el-table v-loading="loading" :data="tableList" :summary-method="getSummaries" height="442px" show-summary>
        <el-table-column align="center" label="日期" prop="date"/>
        <el-table-column align="center" label="今日新增" prop="todayCustomer"/>
        <el-table-column align="center" label="今日流失" prop="todayLost"/>
        <el-table-column align="center" label="今日净增" prop="todayNetIncrease"/>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"
      ></NormalPagination>
    </el-card>
  </div>
</template>

<script>
import { parseTime } from '@/utils/common'
import { automateList } from '@/api/escrowAccount'
import moment from 'moment/moment'

export default {
  name: 'ClientStatistics',
  data() {
    return {
      loading: false,
      queryForm: {
        dateType: '0',
        dateRange: null,
        startDate: '',
        endDate: '',
        userId: '',
        pageNum: 1,
        pageSize: 20
      },
      formList: [
        {
          label: '',
          value: '',
          prop: 'dateType',
          type: 'SPECIAL_SELECT',
          emunName: 'dateTypeList'
        },
        {
          label: '',
          value: null,
          prop: 'dateRange',
          type: 'SPECIAL_DATE',
          emunName: '',
          aboutProp: 'dateType',
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now()
            }
          }
        },
        {
          label: '员工',
          value: '',
          prop: 'userId',
          type: 'SELECT',
          emunName: 'userIdList',
          multiple: false
        }
      ],
      enumOpt: {
        userIdList: [],
        dateTypeList: [
          { dictLabel: '自然日', dictValue: '0' },
          { dictLabel: '自然周', dictValue: '1' },
          { dictLabel: '自然月', dictValue: '2' },
          { dictLabel: '自然年', dictValue: '3' }
        ]
      },
      total: 0,
      leadList: [],
      tableList: [],
      numObj: {
        netIncreaseTotal: '',
        customerTotal: '',
        lostTotal: ''
      }
    }
  },
  methods: {
    getListFn() {
      console.log(this.queryForm, 'queryForm')
      let obj = this.reassembly()
      let params = {
        dateType: obj.dateType,
        startDate: obj.startTime,
        endDate: obj.endTime,
        userId: this.queryForm.userId,
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize
      }
      // this.loading = true
      // queryStatisticsCount(params).then(res => {
      //   if (res.code == 200) {
      //     this.numObj = {...res.data}
      //     this.tableList = res.data.scrmCountVOS
      //     this.total = res.data.total
      //   }
      //   this.loading = false
      // }).catch(() => {
      //   this.loading = false
      // })
      this.numObj = {
        netIncreaseTotal: '3',
        customerTotal: '159',
        lostTotal: '1'
      }
      const date = moment(new Date()).format('YYYY-MM-DD')
      this.tableList = [{
        date: date,
        todayCustomer: '4',
        todayLost: '1',
        todayNetIncrease: '3',
      }]
      this.total = 1
    },
    // 组装startTime和endTime入参
    reassembly() {
      let startTime = null, endTime = null, dateType = null
      let selectDate = this.queryForm.dateRange
      if (selectDate) {
        if (this.queryForm.dateType === '0') {
          dateType = 'DAY' // 日
          startTime = selectDate[0]
          endTime = selectDate[1]
        } else if (this.queryForm.dateType === '1') {
          dateType = 'DAY' // 周
          startTime = parseTime(new Date(new Date(selectDate).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
          endTime = parseTime(new Date(new Date(selectDate).getTime() + 5 * 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
        } else if (this.queryForm.dateType === '2') {
          dateType = 'MONTH' // 月
          startTime = selectDate
          const temp = selectDate.split('-')
          let str = +temp[1] + 1
          temp[1] = temp[1] < 9 ? '0' + str : str
          if (temp[1] === 13) {
            temp[1] = '01'
            temp[0] = +temp[0] + 1
          }
          endTime = temp.join('-')
        } else if (this.queryForm.dateType === '3') {
          dateType = 'YEAR' // 年
          startTime = selectDate
          const temp = selectDate.split('-')
          temp[0] = +temp[0] + 1
          endTime = temp.join('-')
        }
      }
      return { startTime, endTime, dateType }
    },
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    handleReset() {
      this.queryForm = {
        dateType: '0',
        userId: '',
        pageNum: 1,
        pageSize: 20
      }
      this.selectDateType()
      this.$set(this, 'queryForm', this.queryForm)
      this.handleQuery()
    },
    // 翻页
    handleSizeChange(value) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = value
      this.getListFn()
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.getListFn()
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        }
      })
      return sums
    },
    selectDateType() {
      let startTime = parseTime(new Date(new Date().getTime()), '{y}-{m}-{d}')
      let endTime = parseTime(new Date(new Date().getTime()), '{y}-{m}-{d}')
      if (this.queryForm.dateType === '0') {
        this.queryForm.dateRange = [startTime, endTime]
      } else {
        this.queryForm.dateRange = startTime
      }
    }
  },
  mounted() {
    automateList({ pageNum: 1, pageSize: 99999 }).then((res) => {
      console.log(res, 'res')
      this.enumOpt.userIdList = res.rows.map(item => {
        return {
          ...item,
          dictLabel: item.userName,
          dictValue: item.weUserId
        }
      })
    })
    this.selectDateType()
    this.handleQuery()
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.icon-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .icon-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 30%;

    img {
      height: 40px;
    }

    .text-box {
      display: flex;
      flex-direction: column;
      align-items: end;

      .num-span {
        font-size: 20px;
        font-weight: 600;
        color: #505050;
        margin-bottom: 5px;
      }

      span {
        color: #999999;
        font-size: 14px;
      }
    }
  }
}

.line-v {
  width: 1px;
  height: 62px;
  border: 1px solid #EEEEEE;
}
</style>
